import React, { Component } from 'react'
import './index.less'
export default class Item extends Component {
    state = {
        mouse: false
    }
    moveRef = React.createRef()
    //鼠标移入
    handleEnter = (flag) => {
        return () => {
            this.setState({ mouse: flag })
        }
    }
    //鼠标移除
    handleLeave = (flag) => {
        return () => {
            this.setState({ mouse: flag })
        }
    }
    //删除任务传参
    handleRemove = () => {
        if (window.confirm('确定删除吗?')) {
            this.props.handleSend(this.moveRef)
        }
    }
    //勾选
    handleCheck = (id) => {
        return (e) => {
            this.props.handleCheck(id, e.target.checked)
        }
    }
    render() {
        const { id, name, done } = this.props
        const { mouse } = this.state
        return (
            <li style={{ backgroundColor: mouse ? '#ddd' : 'white' }} onMouseEnter={this.handleEnter(true)} onMouseLeave={this.handleLeave(false)} ref={this.moveRef}>
                <label>
                    <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
                    <span>{name}</span>
                </label>
                <button className='btn btn-danger' style={{ display: mouse ? 'block' : 'none' }} onClick={this.handleRemove}>删除</button>
            </li>
        )
    }
}
